<template>
    <div id='app'>

        <div class="container">
            <h1>个人主页</h1>
            <hr>
            <div class="information">
                <h2>个人信息</h2>
                <!--<table>
                    <tr><td>用户名:</td><td>{{name}}</td></tr>
                    <tr><td>电话号码:</td><td>{{phone}}</td></tr>
                    <tr><td>系别:</td><td>{{depart}}</td></tr>
                    <tr><td>专业: </td><td>{{major}}</td></tr>
                    <tr><td>个性签名:</td><td>{{intro}}</td></tr>
                </table>-->
                <ul>
                    <li><b>用户名:</b></b><span>{{name}}</span></li>
                    <li><b>电话号码:</b><span> {{phone}}</span></li>
                    <li><b>系    别:</b><span> {{depart}}</span></li>
                    <li><b>专    业:</b><span> {{major}}</span></li>
                    <li><b>个性签名:</b><span> {{intro}}</span></li>
                </ul>
            </div>
            <div class="production">
                <h2>个人作品</h2>
                <div class='productShow'>

                    <!-- <span class='noPro'>你暂时没有作品!</span> -->

                    <figure v-for="item in pro" @click='godetail(item._id)' v-if="item.status==2">
                        <strong class="title">{{item.title}}</strong>
                        <span class="author">{{item.author}}</span>
                        <img class='showImg' v-bind:src="getCoverUrl(item.coverImg_url)" alt="">
                        <figcaption>
                            <div class="info">
                                <p class='sign'>
									<a href="javascript:" class="icon siIcon"></a><span>{{item.sign}}</span></p>
								<p class='like'>
									<a href="javascript:" class="icon liIcon"></a><span>{{item.likes.length}}</span></p>
								<p class='star'>
									<a href="javascript:" class="icon stIcon"></a><span>{{getstar(item.stars)}}</span></p>
                            </div>
                        </figcaption>
                    </figure>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                name: "",
                phone: "",
                depart: "",
                major: "",
                intro: "",
                pro: [],
            }
        },
        created() {
            this.$store.dispatch({
                type: "getAndDelMethod",
                method: "get",
                url: "/api/user/" + this.$store.state.userInfo._id,
                params: {
					conditions: '{"status":2}',
				},
                callback: (result) => {
                    console.log(result)
                    this.name = result.body.data.name;
                    this.phone = result.body.data.phone;
                    this.depart = result.body.data.depart;
                    this.major = result.body.data.major;
                    this.intro = result.body.data.intro;
                    this.pro = result.body.data.pro;
                }
            })

        },
        computed: {
            
		},
        methods: {
            getCoverUrl(data) {
                return this.$store.state.ip + data;
            },
            godetail(_id) {
                this.$router.push({
                    path: '/detail/',
                    query: {
                        _id: _id,
                    }
                });
            },
            getstar(star) {
				let sum = 0;
				for (let i = 0; i < star.length; i++) {
					sum = sum + star[i].count;
				}
				return Math.ceil(sum / star.length) ? Math.ceil(sum / star.length) : 0;
			}
        }


    }

</script>



<style scoped>
    @import '../../assets/css/user.css';
    h2 {
        display: block;
        width:1100px;
        margin-top: 10px;
        margin-left: 20px;
    }
    
    .container {
        height: 800px;
    }
    
    .information {
        float: left;
        width: 1200px;
        min-height: 200px;
        margin-top: 30px;
        border: 1px solid #585858;
    }
    
    .information ul {
        margin-top: 5px;
        margin-left: 50px;
        line-height: 33px;
    }
    
    .information ul li {
        display: block;
        float: left;
        width: 1000px;
        list-style: none;
        border-bottom:1px solid #ccc;
    }
    
    .information ul li b {
        display: inline-block;
        width: 120px;
    }
    .information ul li span {
        display: inline-block;
    }
    
    .production {
        float: left;
        width: 1200px;
        min-height: 300px;
        margin-top: 20px;
        margin-bottom: 20px;
        border: 1px solid #ccc;
    }
    
    .production .productShow {
        width: 1200px;
    }
    
    figure {
        margin-left: 30px;
        margin-right: 0px;
    }
    
    .information：after {
        clear: both;
    }
    
    .production:after {
        clear: both;
    }
</style>